@extends('layouts.teacher')

@section('title', $clazz->name . ' - 学生列表')

@section('content')
<style>
    .student {
        text-align: center;
        margin-bottom: 10px;
        padding: 5px;
    }
    .student-table {
        width: 100%;
        border-collapse: collapse;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #ddd;
        cursor: pointer;
        transition: all 0.3s;
    }
    .student-table:hover {
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .student-name {
        background-color: #f8f9fa;
        padding: 8px;
        border-bottom: 1px solid #ddd;
        font-size: 1.6rem;
        font-weight: bold;
    }
    .score-row td {
        padding: 5px 0;
        font-size: 1.2rem;
        font-weight: bold;
    }
    .add-score {
        background-color: #e8f5e9;
        color: #2e7d32;
    }
    .deduct-score {
        background-color: #ffebee;
        color: #c62828;
    }
    .container {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    h1 {
        font-size: 1.8rem;
        margin-bottom: 15px !important;
        text-align: center;
    }
    @media (min-width: 768px) {
        .col-md-1_5 {
            flex: 0 0 12.5%;
            max-width: 12.5%;
        }
    }
</style>
<input type="hidden" id="clazz_id" value="{{ $clazz->id }}">
<div class="panel panel-success header-shadow sticky top-0 z-10 bg-white">
    <div class="panel-heading">
        <div class="container mx-auto px-4 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-graduation-cap text-primary text-2xl"></i>
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">
                        {{ $clazz->name }} 班学生列表
                    </h2>
                </div>
                
                <div class="flex flex-wrap gap-2 md:gap-4">
                    <a href="{{ route('teacher.clazzes') }}" class="flex items-center gap-1 px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 btn-hover">
                        <span class="glyphicon glyphicon-arrow-left"></span>
                        <span>返回班级列表</span>
                    </a>
                    <a href="{{ route('teacher.students', ['clazzId' => $clazz->id, 'sort' => 'n', 'filter' => request('filter', 'c')]) }}" 
                       id="sort-name" 
                       class="flex items-center gap-1 px-4 py-2 rounded-lg btn-hover {{ request('sort') === 'n' ? 'bg-primary text-white border-primary' : 'bg-white border border-gray-300 text-gray-700' }}">
                        <span>姓名排序</span>
                    </a>
                    <a href="{{ route('teacher.students', ['clazzId' => $clazz->id, 'sort' => 's', 'filter' => request('filter', 'c')]) }}" 
                       id="sort-name" 
                       class="flex items-center gap-1 px-4 py-2 rounded-lg btn-hover {{ request('sort') === 's' ? 'bg-primary text-white border-primary' : 'bg-white border border-gray-300 text-gray-700' }}">
                        <span>加分排序</span>
                    </a>
                    <a href="{{ route('teacher.students', ['clazzId' => $clazz->id, 'sort' => request('sort', 'n'), 'filter' => 'c']) }}" 
                       id="sort-name" 
                       class="flex items-center gap-1 px-4 py-2 rounded-lg btn-hover {{ request('filter') === 'c' ? 'bg-primary text-white border-primary' : 'bg-white border border-gray-300 text-gray-700' }}">
                        <span>本周</span>
                    </a>
                    <a href="{{ route('teacher.students', ['clazzId' => $clazz->id, 'sort' => request('sort', 'n'), 'filter' => 'p']) }}" 
                       id="sort-name" 
                       class="flex items-center gap-1 px-4 py-2 rounded-lg btn-hover {{ request('filter') === 'p' ? 'bg-primary text-white border-primary' : 'bg-white border border-gray-300 text-gray-700' }}">
                        <span>上周</span>
                    </a>
                    <a href="{{ route('teacher.students', ['clazzId' => $clazz->id, 'sort' => request('sort', 'n'), 'filter' => 'a']) }}" 
                       id="sort-name" 
                       class="flex items-center gap-1 px-4 py-2 rounded-lg btn-hover {{ request('filter') === 'a' ? 'bg-primary text-white border-primary' : 'bg-white border border-gray-300 text-gray-700' }}">
                        <span>全部</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    @if(count($students) > 0)
    <div class="row">
        @foreach($students as $student)
        <div class="col-md-1_5 student">
            <table class="student-table" onclick="showOptions('{{ $student->name }}', '{{ $student->id }}')">
                <tr>
                    <td class="student-name" colspan="2">
                        @if($student->gender == '男')
                            <span class="text-blue-500 mr-1 font-bold text-2xl">{{ $student->upper_initial }} {{ $student->name }}</span>
                        @else
                            <span class="text-red-500 mr-1 font-bold text-2xl">{{ $student->upper_initial }} {{ $student->name }}</span>
                        @endif
                    </td>
                </tr>
                <tr class="score-row">
                    <!-- 直接从学生模型获取分数并显示 -->
                    <td class="add-score" id="add_{{ $student->id }}">+{{ $student->total_add ?? 0 }}</td>
                    <td class="deduct-score" id="deduct_{{ $student->id }}">-{{ $student->total_deduct ?? 0 }}</td>
                </tr>
            </table>
        </div>
        @endforeach
    </div>
    @else
    <div class="alert alert-warning">
        该班级暂无学生数据。
    </div>
    @endif
</div>

<div class="modal fade" id="optionsModal" tabindex="-1" role="dialog" aria-labelledby="optionsModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="optionsModalLabel">选择操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="studentName"></p>
                <button type="button" class="btn btn-success" onclick="addScore()">加分</button>
                <button type="button" class="btn btn-danger" onclick="deductScore()">扣分</button>
            </div>
        </div>
    </div>
</div>

<script>
    let currentStudentId;
    let currentStudentName;
    // document.addEventListener('DOMContentLoaded', function() {
    //   $(document).ready(function() {
    //     // 移除原有的分数加载AJAX请求，因为分数已通过后端直接渲染
        
    //     // 排序按钮事件保持不变
    //     document.querySelectorAll('button[id^="sort-"]').forEach(button => {
    //         button.addEventListener('click', function() {
    //             document.querySelectorAll('button[id^="sort-"]').forEach(btn => {
    //                 btn.classList.remove('bg-primary', 'text-white', 'border-primary');
    //                 btn.classList.add('bg-white', 'text-gray-700', 'border-gray-300');
    //             });
                
    //             this.classList.remove('bg-white', 'text-gray-700', 'border-gray-300');
    //             this.classList.add('bg-primary', 'text-white', 'border-primary');
                
    //             const sortType = this.id.split('-')[1];
    //             console.log(`排序类型: ${sortType}`);
    //             // 实际应用中需要添加排序逻辑
    //         });
    //     });
    //   });
    // });

    
    function showOptions(studentName, studentId) {
        currentStudentName = studentName;
        currentStudentId = studentId;
        $('#studentName').text('对 ' + studentName + ' 进行操作');
        $('#optionsModal').modal('show');
    }

    function addScore() {
        let addElement = $(`#add_${currentStudentId}`);
        if (addElement.length) {
            let currentAdd = parseInt(addElement.text().replace('+', '')) || 0;
            const newAdd = currentAdd + 1;
            const clazzId = $('#clazz_id').val();

            $.post('/teacher/feedback', {
                _token: '{{ csrf_token() }}',
                student_id: currentStudentId, 
                clazz_id: clazzId,
                score_change: 1
            })
            .done(function(response) {
                addElement.text('+' + newAdd);
                $('#optionsModal').modal('hide');
                console.log('加分成功:', response);
            })
            .fail(function(xhr) {
                console.error('加分失败:', xhr.responseText);
                alert('加分操作失败，请重试');
            });
        }
    }

    function deductScore() {
        let deductElement = $(`#deduct_${currentStudentId}`);
        if (deductElement.length) {
            let currentDeduct = parseInt(deductElement.text().replace('-', '')) || 0;
            const newDeduct = currentDeduct + 1;
            const clazzId = $('#clazz_id').val();
        
            $.post('/teacher/feedback', {
                _token: '{{ csrf_token() }}',
                student_id: currentStudentId,
                clazz_id: clazzId,
                type: 'deduct',
                score_change: -1
            })
            .done(function(response) {
                deductElement.text('-' + newDeduct);
                $('#optionsModal').modal('hide');
                console.log('减分成功:', response);
            })
            .fail(function(xhr) {
                console.error('减分失败:', xhr.responseText);
                alert('减分操作失败，请重试');
            });
        }
    }
</script>
@endsection